<template>
  <div class="button-group">
    <el-button-group class="btn-func">
      <el-button type="primary" icon="el-icon-upload" @click="importDialog = true"
        >导入组织</el-button
      >
      <!-- <el-button type="primary" icon="el-icon-share"></el-button>
      <el-button type="primary" icon="el-icon-delete"></el-button> -->
    </el-button-group>

    <el-dialog title="导入excel" :visible.sync="importDialog" width="30%" @closed="importDialogClosed">
      <el-upload
        ref="upload"
        action="#"
        :file-list.sync="fileList"
        :auto-upload="false"
        accept=".xlsx"
        :multiple="false"
      >
        <el-button slot="trigger" size="small" type="primary"
          >选取文件</el-button
        >
        <el-button
          style="margin-left: 10px"
          size="small"
          type="success"
          @click="submitUpload"
          >上传到服务器</el-button
        >
        <div slot="tip" class="el-upload__tip">
          只能上传xls/xlsx文件
        </div>
      </el-upload>
      <span slot="footer" class="dialog-footer">
        <el-button @click="importDialog = false">取 消</el-button>
        <el-button type="primary" @click="submitUpload"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { importExcel } from '@/api/organization'
export default {
  data() {
    return {
      fileList: [],
      importDialog: false,
    }
  },
  methods: {
    async submitUpload(e) {
      let formdata = new FormData()
      let files = this.$refs.upload.uploadFiles
      if (files.length === 0) {
        this.$message({
          message: '请上传导入文件',
          type: 'error',
        })
        return
      }
      formdata.append('file', files[0].raw)
      let { data } = await importExcel(formdata)
      console.log(data)
    },
    importDialogClosed() {
      this.$refs.upload.clearFiles()
    }
  },
}
</script>

<style lang="scss" scoped>
.btn-func {
  width: 100%;
  padding: 10px;
}
</style>
